﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> Peity 例子画面 </title>

    <!--  这个是 基本的 jQuery 的 js.  -->
    <script src="../../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>

    <!-- 这个是 Peity 需要使用的 js.  -->
    <script src="../../Scripts/jquery.peity.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            // 饼图的 js 代码.
            $("span.pie").peity("pie");

            // 线图的 js 代码.
            $(".line").peity("line");

            // 柱状图的 js 代码.
            $(".bar").peity("bar");



            // 用于设置颜色处理的  js 代码.
            $(".bar-colours-1").peity("bar", {
                colours: ["red", "green", "blue"]
            });

            $(".bar-colours-2").peity("bar", {
                colours: function (value) {
                    return value > 0 ? "green" : "red"
                }
            });

            $(".bar-colours-3").peity("bar", {
                colours: function (_, i, all) {
                    var g = parseInt((i / all.length) * 255)
                    return "rgb(255, " + g + ", 0)"
                }
            });

            $(".pie-colours-1").peity("pie", {
                colours: ["cyan", "magenta", "yellow", "black"]
            });

            $(".pie-colours-2").peity("pie", {
                colours: function (_, i, all) {
                    var g = parseInt((i / all.length) * 255)
                    return "rgb(255, " + g + ", 0)"
                }
            });



            // 定时处理的代码.


            // 首先初始化.
            var updatingChart = $(".updating-chart").peity("line", { width: 64 });

            // 定时执行.
            setInterval(function () {
                // 取得随机数.
                var random = Math.round(Math.random() * 10);
                // 首先字符串 按 逗号分割，切换为数组.
                var values = updatingChart.text().split(",");

                // 删除数组第一项
                values.shift();
                // 数组末尾追加一项.
                values.push(random);

                // 通过重新设置 text , 再调用 .change() 方法来完成刷新的处理.
                updatingChart
                    .text(values.join(","))
                    .change();
            }, 1000);



            // 测试特殊属性的.
            $(".data-attr").peity("pie");




            // 事件处理的代码
            // Simple evented example.
            $("select").change(function () {
                var text = $(this).val() + "/" + 5;

                $(this)
                  .siblings("span.graph")
                  .text(text)
                  .change();

                $("#notice").text("Chart updated: " + text)
            }).change()

            $("span.graph").peity("pie");

        });
        
    </script>

</head>
<body>



<h3> 饼图 </h3>

<table border="1">
  <tr>
    <td> 简单一个  1/5  饼图的情况.   </td>
    <td> <span class="pie">1/5</span> </td>
  </tr>
  <tr>
    <td> 简单一个  226/360  饼图的情况.   </td>
    <td> <span class="pie">226/360</span> </td>
  </tr>
  <tr>
    <td> 简单一个  0.52/1.5610  饼图的情况.   </td>
    <td> <span class="pie">0.52/1.561</span> </td>
  </tr>
  <tr>
    <td> 不计算总数， 只有明细： 1,4  的情况.   </td>
    <td> <span class="pie">1,4</span> </td>
  </tr>
  <tr>
    <td> 不计算总数， 只有明细： 226,134  的情况.   </td>
    <td> <span class="pie">226,134</span> </td>
  </tr>
  <tr>
    <td> 不计算总数， 只有明细： 0.52,1.041  的情况.   </td>
    <td> <span class="pie">0.52,1.041</span> </td>
  </tr>
  <tr>
    <td> 不计算总数， 只有明细： 1,2,3,2,2  的情况.   </td>
    <td> <span class="pie">1,2,3,2,2</span> </td>
  </tr>

</table>







<hr />


<h3> 线图 </h3>


<table border="1">
  <tr> 
    <td> 简单的逗号分割的数值列表：5,3,9,6,5,9,7,3,5,2  </td>
    <td> <span class="line">5,3,9,6,5,9,7,3,5,2</span> </td>
  </tr>
  <tr> 
    <td> 简单的逗号分割的数值列表：5,3,2,-1,-3,-2,2,3,5,2  </td>
    <td> <span class="line">5,3,2,-1,-3,-2,2,3,5,2</span> </td>
  </tr>
  <tr> 
    <td> 简单的逗号分割的数值列表：0,-3,-6,-4,-5,-4,-7,-3,-5,-2  </td>
    <td> <span class="line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>  </td>
  </tr>
</table>




<hr />


<h3> 柱状图 </h3>


<table border="1">
  <tr>
    <td>简单的逗号分割的数值列表：5,3,9,6,5,9,7,3,5,2 </td>
    <td><span class="bar">5,3,9,6,5,9,7,3,5,2</span> </td>
  </tr>
  <tr>
    <td>简单的逗号分割的数值列表：5,3,2,-1,-3,-2,2,3,5,2 </td>
    <td><span class="bar">5,3,2,-1,-3,-2,2,3,5,2</span> </td>
  </tr>
  <tr>
    <td>简单的逗号分割的数值列表：0,-3,-6,-4,-5,-4,-7,-3,-5,-2 </td>
    <td><span class="bar">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span> </td>
  </tr>
</table>






<hr />

<h3> 自定义颜色的处理 </h3>



<table border="1">
  <tr>
    <th> 数值 </th>
    <th> 颜色参数 </th>
    <th> 运行效果 </th>
  </tr>

  <tr>
    <td> 5,3,9,6,5,9,7,3,5,2 </td>
    <td> 简单设置  colours: ["red", "green", "blue"]  也就是依次   红绿蓝 的效果 </td>
    <td> <span class="bar-colours-1">5,3,9,6,5,9,7,3,5,2</span> </td>
  </tr>

  <tr>
    <td> 5,3,2,-1,-3,-2,2,3,5,2 </td>
    <td> 条件设置 value > 0 ? "green" : "red"， 大于0的绿色，否则红色  </td>
    <td> <span class="bar-colours-2">5,3,2,-1,-3,-2,2,3,5,2</span> </td>
  </tr>

  <tr>
    <td>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</td>
    <td> 通过函数计算， 并用  rgb 函数进行设置颜色 </td>
    <td> <span class="bar-colours-3">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span> </td>
  </tr>

  <tr>
    <td> 4,7,6,5 </td>
    <td> 通过 colours: ["cyan", "magenta", "yellow", "black"] 手动指定饼图中的每一个颜色 </td>
    <td> <span class="pie-colours-1">4,7,6,5</span> </td>
  </tr>

  <tr>
    <td>5,3,9,6,5</td>
    <td> 通过函数计算， 并用  rgb 函数进行设置颜色 </td>
    <td> <span class="pie-colours-2">5,3,9,6,5</span> </td>
  </tr>
</table>





<hr />

<h3> 可更新的线图 </h3>


<table  border="1">
  <tr>
    <td> 初始数值： 5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2  </td>
    <td> <span class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span> </td>
    <td> 使用 js 的 setInterval 方法，定期调用函数进行处理.  </td>
  </tr>
</table>



<hr />
<h3> data-* 属性的设置  </h3>


<table  border="1">
  <tr>
    <th> 指定的参数 </th>
    <th> 显示效果 </th>
  </tr>

  <tr>
    <td> data-colours='["red", "#eeeeee"]'    data-diameter="40" </td>
    <td> <span class="data-attr"  data-colours='["red", "#eeeeee"]'    data-diameter="40">1/7</span> </td>
  </tr>

  <tr>
    <td> data-colours='["orange", "#eeeeee"]' data-diameter="36" </td>
    <td> <span class="data-attr"   data-colours='["orange", "#eeeeee"]' data-diameter="36">2/7</span> </td>
  </tr>

  <tr>
    <td> data-colours='["yellow", "#eeeeee"]' data-diameter="32" </td>
    <td> <span class="data-attr"   data-colours='["yellow", "#eeeeee"]' data-diameter="32">3/7</span> </td>
  </tr>

  <tr>
    <td> data-colours='["green", "#eeeeee"]'  data-diameter="28" </td>
    <td> <span class="data-attr"   data-colours='["green", "#eeeeee"]'  data-diameter="28">4/7</span> </td>
  </tr>

  <tr>
    <td> data-colours='["blue", "#eeeeee"]'   data-diameter="24" </td>
    <td> <span class="data-attr"   data-colours='["blue", "#eeeeee"]'   data-diameter="24">5/7</span> </td>
  </tr>

  <tr>
    <td> data-colours='["indigo", "#eeeeee"]' data-diameter="20" </td>
    <td> <span class="data-attr"   data-colours='["indigo", "#eeeeee"]' data-diameter="20">6/7</span> </td>
  </tr>

  <tr>
    <td> data-colours='["violet", "#eeeeee"]' data-diameter="16" </td>
    <td> <span class="data-attr"   data-colours='["violet", "#eeeeee"]' data-diameter="16">7/7</span> </td>
  </tr>

</table>







<hr />

  <h3 id="events"> 事件处理的代码 </h3>

  <p> "change" 事件  当调用 <code>change()</code> 后， 会被触发. </p>

  <ul>
    <li>
      <span class="graph"></span>
      <select>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4" selected="selected">4</option>
        <option value="5">5</option>
      </select>
    </li>
    <li>
      <span class="graph"></span>
      <select>
        <option value="0">0</option>
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </li>
    <li>
      <span class="graph"></span>
      <select>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3" selected>3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </li>
  </ul>

  <p id="notice">Nothing's happened yet.</p>


<hr />


  <h3 id="defaults">默认值的设置</h3>

  <p>Defaults can be overridden globally like so:</p>

  <pre><code class="javascript">$.fn.peity.defaults.pie = {
  colours: ["<span style="background:#ff9900">#ff9900</span>", "<span style="background:#fff4dd">#fff4dd</span>", "<span style="background:#ffd592">#ffd592</span>"],
  delimiter: null,
  diameter: 16,
  height: null,
  width: null
}

$.fn.peity.defaults.line = {
  colour: "<span style="background:#c6d9fd">#c6d9fd</span>",
  strokeColour: "<span style="background:#4d89f9">#4d89f9</span>",
  strokeWidth: 1,
  delimiter: ",",
  height: 16,
  max: null,
  min: 0,
  width: 32
}

$.fn.peity.defaults.bar = {
  colours: ["<span style="background:#4d89f9">#4d89f9</span>"],
  delimiter: ",",
  height: 16,
  max: null,
  min: 0,
  spacing: devicePixelRatio || 1,
  width: 32
}</code></pre>








</body>
</html>
